<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿写响应式登陆注册页面</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            /* 固定盒子宽度！！ */
            box-sizing: border-box;            
        }
        body{
            /* body里面只有一个盒子 container */
            display:flex;
            /* 左右对齐 */
            justify-content: center;
            /* 上下对齐 */
            align-items: center;
            /* vh 适配设备的高度100% */
            min-height: 100vh;
            background-color:#03a9f4;

            transition:0.5s;
        }

        /* 改色 */
        body.active{
            background: #f43648;
        }

        .container{
            margin: 20px;
            /* 盒内相对定位 */
            position: relative;
            width: 800px;
            height:500px;
        }
        .blueBg{
            position: absolute;
            top: 40px;
            width: 100%;
            height: 420px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 设置盒子阴影 */
            background-color: rgba(255,255,255,0.2);
            box-shadow: 0 5px 45px rgba(0,0,0,0.15);
        }
        .blueBg .box{
            position: relative;
            width: 50%;
            height: 100%;
            /* box 盒子内的 内容文本框 + 按钮 设置 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 列排序 */
            flex-direction: column;
        }        
        .blueBg .box h2{
            color:rgba(0,0,0,0.8);
            font-size: 1.2em;
            font-weight: 500;
            margin-bottom: 10px;
            text-shadow:5px 9px 4px rgba(0,0,0,0.5) ;
        }
        .blueBg .box button{
            /* 鼠标变手指 */
            cursor: pointer;
            padding:10px 25px;
            background-color: #fff;
            color: #333;
            font-size: 16px;
            font-weight: 500;
            border: none;
            /* 以下自加 */
            border-radius: 100px/100px;
            box-shadow: 0 5px 45px rgba(0,0,0,0.35);
            transition: all 0.3s;
        }
        .blueBg .box button.signinBtn:hover{
            /* 以下自加 */
            background-color: #f43648;
            color: white;
            font-weight: bolder;
            transform: scale(1.1);
            transition: all 0.3s;
        }
        .blueBg .box button.signupBtn:hover{
            /* 以下自加 */
            background-color: #03a9f4;
            color: white;
            font-weight: bolder;
            transform: scale(1.1);
            transition: all 0.3s;
        }
        .formBx{
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-color: #fff;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 盒子阴影 */
            box-shadow: 0 5px 45px rgba(0,0,0,0.25);

            /* 动画滑动 */
            transition: 0.5s ease-in-out;
            /* 隐藏不显示的表单 */
            overflow: hidden;
        }

        /* form卡片移动 */
        .formBx.active{
            left: 50%;
        }
        /* form初始位置  */
        .formBx .form{
            position: absolute;
            left: 0;
            width: 100%;
            padding: 50px;
            /* 表单滑动 */
            transition: 0.5s;
        }


        /* 登录form！！滑动隐藏 */
        .formBx.active .signinForm{
            left: -100%;
            transition-delay: 0s;
        }
        /* 延迟动画 */
        .formBx .signinForm
        {
            transition-delay: 0.25s;
        }
        /* 注册form！！ 初始 位置设定-上面设定了form绝对定位的 */
        .formBx .signupForm
        {
            left: 100%;
            transition-delay: 0s;
        }
        /* 注册form!! 滑动 */
        .formBx.active .signupForm
        {
            left: 0%;
            transition-delay: 0.25s;
        }

        .formBx .form form{
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        .formBx .form form h3{
            margin-bottom: 20px;
            font-size: 1.5em;
            font-weight: 500;
            color: #333;
        }
        .formBx .form form input{
            margin-bottom: 20px;
            width: 100%;
            padding: 10px;
            /* 无用啊！ */
            outline: none;
            font-size: 16px;
            border: 1px solid #333;
        }
        .formBx .form form input[type="submit"]{
            background: #03a9f4;
            color:white;
            font-weight: bolder;
            border: none;
            max-width: 100px;
            cursor: pointer;
            border-radius: 100px/100px;
            /* 以下自加 */
            box-shadow: 0 5px 45px rgba(0,0,0,0.35);
            transition: all 0.3s;
        }
        .formBx .form form input[type="submit"]:hover{
            /* 以下自加 */
            color:black;
            transition: all 0.3s;
        }
        /* 按钮颜色改变！！ */
        .formBx.active .signupForm input[type="submit"]{
            background-color: #f43648;
        }
        .formBx .form form .forgot{
            color:#333;
        }

        /* 适配小屏 */
        @media (max-width: 991px){
            .container{
                /* 原始
                    .container{
                        margin: 20px;
                        position: relative;
                        width: 800px;
                        height:500px;
                    }
                 */
                max-width: 400px;
                height: 650px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .container .blueBg{
                /* 原始
                    .blueBg{
                        position: absolute;
                        top: 40px;
                        width: 100%;
                        height: 420px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: rgba(255,255,255,0.2);
                        box-shadow: 0 5px 45px rgba(0,0,0,0.15);
                    }
                */
                top: 0;
                height:100%;
            }
            .formBx{
                /* origin
                    .formBx{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 50%;
                        height: 100%;
                        background-color: #fff;
                        z-index: 1000;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        box-shadow: 0 5px 45px rgba(0,0,0,0.25);
                        transition: 0.5s ease-in-out;
                        overflow: hidden;
                    }
                 */
                 width: 100%;
                 /* compare blueBg-height 650px , 150px emtpy */
                 height: 500px;
                 top: 0px;
                 /* box-shadow: none; */
            }
            .blueBg .box{
                /* origin
                .blueBg .box{
                    position: relative;
                    width: 50%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;                    
                    flex-direction: column;
                } */
                position: absolute;
                width: 100%;
                /* 对应留出的blueBg - formBx */
                height: 150px;
                bottom: 0;
            }
            .box.signin{
                top: 0;
            }
            /* form表单下滑！！ */
            .formBx.active{
                left:0;
                top: 150px;
            }
        }


    </style>
</head>
<body>
    <!-- 一级盒子 -->
    <div class="container">
        <!--二级盒子01 提示语句 -->
        <div class="blueBg">
            <div class="box signin">
                <h2>Already Have a account?</h2>
                <button class="signinBtn">Sign in</button>
            </div>
            <div class="box signup">
                <h2>Don`t have a account?</h2>
                <button class="signupBtn">Sign up</button>
            </div>
        </div>

        <!--二级盒子02 登录注册表单 -->
        <div class="formBx">
            <div class="form signinForm">
                <form>
                    <h3>Sign In</h3>
                    <input type="text" placeholder="Username">
                    <input type="password" placeholder="Password">
                    <input type="submit" value="login">
                    <a href="#" class="forgot">Forgot Password</a>
                </form>
            </div>
            <div class="form signupForm">
                <form>
                    <h3>Sign Up</h3>
                    <input type="text" placeholder="Username">
                    <input type="text" placeholder="Email Address">
                    <input type="password" placeholder="Password">
                    <input type="password" placeholder="Confirm Password">
                    <input type="submit" value="Register">
                    <a href="#" class="forgot">Forgot Password</a>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 登录
        const signinBtn = document.querySelector('.signinBtn');
        // 注册
        const signupBtn = document.querySelector('.signupBtn');

        const formBx = document.querySelector('.formBx');

        const body = document.querySelector('body');

        signupBtn.onclick = function(){
            body.classList.add("active");
            formBx.classList.add("active");
        };

        signinBtn.onclick = function(){
            body.classList.remove("active");
            formBx.classList.remove("active");
        };
    </script>
</body>
</html>